<!-- 钱包-钱包流水 -->
<template>
	<page-meta :page-style="'overflow:'+(dateSelectShow?'hidden':'visible')"></page-meta>
	<view class="page-box">
		<!-- 时间 -->
		<view class="date">
			<DateSelect @submit="dateSelectSubmit" @setDateSelectShow="setDateSelectShow"></DateSelect>
		</view>

		<!-- 内容 -->
		<view class="content">
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<ListItem :data="item"></ListItem>
			</view>

			<uni-load-more v-if="dataList.length > 0" :contentText="contentText" :status="loadingType"
				@clickLoadMore="setClickLoadMore"></uni-load-more>

			<noData v-if="dataList.length < 1" :meStatus="true"></noData>
		</view>

	</view>
</template>

<script>
	// 页面组件
	import ListItem from './components/listItem.vue'
	import DateSelect from './components/dateSelect.vue'

	// 请求api
	import {
		postLogList
	} from '@/api/user.js'

	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'

	export default {
		name: 'flowing',
		components: {
			ListItem,
			DateSelect
		},
		data() {
			return {
				dataList: [],
				queryState: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
					isQuery: true
				},

				loadingType: 'loading', // 是否显示更多

				dateSelectShow: false, // 是否穿透

				// 各状态文字说明
				contentText: {
					contentdown: "上拉/点击显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},

			}
		},

		onLoad() {
			//初始化
			this.handleInit({
				pageNum: this.queryState.pageNum,
				pageSize: this.queryState.pageSize,
				userId: this.userInfo.id,
				walletId: this.walletInfo.id
			})
		},

		/**
		 * 下拉
		 */
		async onPullDownRefresh() {
			this.handlePullDownRefresh()
		},

		/**
		 * 触底
		 */
		async onReachBottom() {
			console.log('触底了没');
			this.handleReachBottom()
		},

		onShow() {
			this.loadingType = 'loading'
		},

		computed: {
			...mapGetters(['walletInfo', 'userInfo', 'accountTypeList']),

		},

		methods: {
			/**
			 * 点击加载更多
			 */
			setClickLoadMore() {
				this.handleReachBottom()
			},

			/**
			 * 是否穿透
			 */
			setDateSelectShow(e) {
				this.dateSelectShow = e
			},

			/**
			 * 时间选择组件返回值
			 */
			dateSelectSubmit(val) {
				console.log(val, '时间组建返回值');
				this.queryState.pageNum = 1

				this.handleInit({
					pageNum: this.queryState.pageNum,
					pageSize: this.queryState.pageSize,
					userId: this.userInfo.id,
					walletId: this.walletInfo.id,
					createTimeStart: val.startTime, // 开始时间
					createTimeEnd: val.endTime, // 结束时间
				})
			},



			/**
			 * 请求数据
			 */
			async handleInit(params) {

				// 处理中
				uni.showLoading({
					title: '正在处理中'
				});
				this.loadingType = 'loading'

				try {
					const res = await postLogList(params)

					// 关闭处理中
					uni.hideLoading();

					if (res.code !== 200) {
						uni.showToast({
							duration: 3000,
							icon: 'none',
							title: res.msg
						})

						this.dataList = []
						return
					}

					if (this.queryState.pageNum === 1) {
						this.loadingType = 'more'
						this.dataList = []
					}

					if (res.rows?.length < 10 && this.dataList.length === res.total) {
						this.loadingType = 'noMore'
					}
					this.dataList = this.dataList.concat(res.rows)

				} catch (e) {

					console.log(e);

					Object.assign(this.queryState, {
						isQuery: false
					})

					uni.showToast({
						duration: 3000,
						icon: 'none',
						title: '获取流水数据失败'
					})
				}
			},


			async handleReachBottom() {
				if (!this.queryState.isQuery) return false
				this.queryState.pageNum++
				await this.handleInit({
					pageNum: this.queryState.pageNum,
					pageSize: this.queryState.pageSize,
					userId: this.userInfo.id,
					walletId: this.walletInfo.id
				})
			},
			async handlePullDownRefresh() {
				Object.assign(this.queryState, {
					pageNum: 1
				})
				await this.handleInit({
					pageNum: this.queryState.pageNum,
					pageSize: this.queryState.pageSize,
					userId: this.userInfo.id,
					walletId: this.walletInfo.id
				})
				uni.stopPullDownRefresh()
				uni.showToast({
					duration: 5000,
					title: '刷新成功',
					icon: 'none'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.page-box {
		border-top: 2rpx solid rgba(#000, .1);
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(238, 212, 215, 0.2) 100%);
		min-height: 100vh;
		#flex(column,-,-);

		.date {
			#box(100%, 106rpx);
		}

		.content {
			flex: 1;
			box-shadow: 0px 0px 8px 3px rgba(210, 211, 213, 0.5);
			#padding(0 0 24rpx 0);
			background-color: #fff;

			.item {
				&:not(:last-child) {
					border-bottom: 2rpx solid #EAE9E9;
				}


			}

		}


	}
</style>